<!-- 问答列表 -->
<template>
	<view
		:style="'order:'+Item.order+';'+Item.css"
		class="list-ask">
		<template v-if="list_state == 'success'">
			<view
				@click="$_To('post/post?pid='+item.pid)"
				class="for Flex"
				v-for="item in list">
				<view class="left Bj-BeiJingSe Flex">
					<view>{{item.commentCount}}</view>
					<view>回复</view>
				</view>
				<view class="right Flex">
					<view class="H2-Line one">
						<template v-if="item.operations.diversifyImages.length">
							<template v-for="title in item.operations.diversifyImages">
								<template v-if="title.code == 'title'">
									<text :style="title.description">
										[{{title.name}}]
									</text>
								</template>
							</template>
						</template>
						{{item.title?item.title:$_filterHtml(item.content)}}
					</view>
					<view class="info Flex">
						<view class="user Flex">
							<view><image :src="item.author.avatar" mode="widthFix"></image></view>
							<text v-if="item.author.nickname">{{item.author.nickname}}</text>
						</view>
						<view class="time">{{item.createdTimeAgo}}</view>
						<view class="group" v-if="item.group"># {{item.group.gname}}</view>
					</view>
				</view>
			</view>
			<view
				v-if="Item.page"
				@click="getList('more')"
				class="more">点击加载更多</view>
		</template>
		<template v-if="list_state == 'loading'">
			<view class="skeleton-screen" v-for="item in Item.query.pageSize?Item.query.pageSize:1">
				<view class="left loading-css"></view>
				<view class="right">
					<view class="right-top loading-css"></view>
					<view class="right-bottom">
						<view class="loading-css"></view>
						<view class="loading-css"></view>
					</view>
				</view>
			</view>
		</template>
		<template v-if="list_state == 'empty'">
			<public-empty></public-empty>
		</template>
	</view>
</template>

<script>
	export default {
		name:"list-ask",
		props:{
			Item:{
				type:Object,
				default:null
			},
			YrConfig:{
				type:String,
				default:""
			},
			listGid:{
				type:String,
				default:""
			},
			listHid:{
				type:String,
				default:""
			}
		},
		data() {
			return {
				list:[],
				list_state:"loading",
				list_page:2
			};
		},
		mounted(){
			this.getList();
		},
		// 卸载组件
		destroyed(){
			
		},
		methods: {
			getList(more){
				if(this.Item.query.gid == 'empty'){
					this.Item.query.gid = "";
					this.listGid = ""
				}
				if(this.Item.query.hid == 'empty'){
					this.Item.query.hid = "";
					this.listHid = ""
				}
				if(more == 'more'){uni.showLoading({ title: "加载中" });}
				this.$_Request(
					"GET","/api/v2/post/list",
					{
						"mapId": this.Item.query.mapId,
						"mapLng": this.Item.query.mapLng,
						"mapLat": this.Item.query.mapLat,
						"uidOrUsername": this.Item.query.uidOrUsername,
						"hid": this.Item.query.hid?this.Item.query.hid:this.listHid,
						"gid": this.Item.query.gid?this.Item.query.gid:this.listGid,
						"includeSubgroups": this.Item.query.includeSubgroups,
						"allDigest": this.Item.query.allDigest,
						"digestState": this.Item.query.digestState,
						"stickyState": this.Item.query.stickyState,
						"contentType": this.Item.query.contentType,
						"createdDays": this.Item.query.createdDays,
						"createdDate": this.Item.query.createdDate,
						"createdDateGt": this.Item.query.createdDateGt,
						"createdDateLt": this.Item.query.createdDateLt,
						"likeCountGt": this.Item.query.likeCountGt,
						"likeCountLt": this.Item.query.likeCountLt,
						"followCountGt": this.Item.query.followCountGt,
						"followCountLt": this.Item.query.followCountLt,
						"blockCountGt": this.Item.query.blockCountGt,
						"blockCountLt": this.Item.query.blockCountLt,
						"commentCountGt": this.Item.query.commentCountGt,
						"commentCountLt": this.Item.query.commentCountLt,
						"orderType": this.Item.query.orderType,
						"orderDirection": this.Item.query.orderDirection,
						"blockGroups": this.Item.query.blockGroups + this.YrConfig,
						"blockHashtags": this.Item.query.blockHashtags,
						"pluginRatingId": this.Item.query.pluginRatingId,
						"pageSize": this.Item.query.pageSize,
						"page":more == 'more' ? this.list_page : "",
						"whitelistKeys":"pid,commentCount,title,content,author.avatar,author.nickname,createdTimeAgo,group.gname,operations"
					},
					(res) => {
						if(more == 'more'){
							if(res.data.data.list.length){
								this.list = this.list.concat(res.data.data.list);
								this.list_page++
								uni.hideLoading();
							}else{
								uni.showToast({
									title: "没有数据啦",
									icon: "none",
									duration: 1000
								});
							}
							this.$store.commit('mutationsStateonReachBottomStatus',true)
						}else{
							if(res.data.data.list.length){
								this.list = res.data.data.list;
								this.list_state = "success"
							}else{
								this.list_state = "empty"
							}
						}
					}
				)
			}
		},
	}
</script>

<style lang="scss" scoped>
.list-ask{
	.for{
		align-items: center;
		border-bottom: 1rpx solid $BeiJingSe;
		padding: 25rpx 0;
		.left{
			width: 80rpx;
			height: 80rpx;
			overflow: hidden;
			flex-flow: column;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;
			view{
				font-size: 22rpx;
				line-height: 22rpx;
				text-align: center;
			}
			view:nth-child(1){
				padding-bottom: 5rpx;
			}
		}
		.right{
			flex: 1;
			height: 80rpx;
			flex-flow: column;
			justify-content:space-between;
			.one{
				display: -webkit-box;
				/*!autoprefixer:off*/
				-webkit-box-orient: vertical;
				/*autoprefixer:on*/
				-webkit-line-clamp: 1;
				overflow: hidden;
				text{
					padding-right: 5rpx;
					color: $ZhanWeiSe;
					font-size: 22rpx;
					line-height: 22rpx;
				}
			}
			.info{
				align-items: center;
				.user{
					align-items: center;
					view{
						width: 28rpx;
						height: 28rpx;
						border-radius: 100%;
						overflow: hidden;
					}
					text{
						padding: 0 0 0 10rpx;
						color: $LanSe;
						font-size: 22rpx;
						line-height: 22rpx;
						flex-shrink: 0;
					}
				}
				.time{
					padding: 0 0 0 15rpx;
					color: $ZhanWeiSe;
					font-size: 22rpx;
					line-height: 22rpx;
					flex-shrink: 0;
				}
				.group{
					padding: 0 0 0 15rpx;
					color: $ZhanWeiSe;
					font-size: 22rpx;
					line-height: 22rpx;
					display: -webkit-box;
					/*!autoprefixer:off*/
					-webkit-box-orient: vertical;
					/*autoprefixer:on*/
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
			}
		}
	}
	.more{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		line-height: 28rpx;
		color: $ZhanWeiSe;
		padding: 35rpx 0;
	}
}
.skeleton-screen{
	display: flex;
	border-bottom: 1rpx solid $BeiJingSe;
	padding: 25rpx 0;
	.left{
		width: 80rpx;
		height: 80rpx;
	}
	.right{
		flex: 1;
		margin-left: 20rpx;
		height: 80rpx;
		display: flex;
		justify-content:space-between;
		flex-flow: column;
		.right-top{
			width: 100%;
			height: 40rpx;
		}
		.right-bottom{
			display: flex;
			height: 28rpx;
			view:nth-child(1){
				width: 28rpx;
				height: 28rpx;
				border-radius: 100%;
			}
			view:nth-child(2){
				flex: 1;
				height: 28rpx;
				margin-left: 10rpx;
			}
		}
	}
}
</style>